import React from 'react';
import {View, ScrollView, TouchableOpacity, Platform} from 'react-native';
import {Text, Button} from '@rneui/base';
import {useMount, useSetState} from 'ahooks';
import RNDI from 'react-native-device-info';
import {round} from 'lodash';
import style from './style.less';

import {getDefaultHeaderHeight} from '@react-navigation/elements';
import {
  useSafeAreaFrame,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';

export default () => {
  const frame = useSafeAreaFrame();
  const insets = useSafeAreaInsets();
  const defHeaderHeight = getDefaultHeaderHeight(frame, false, insets.top);
  const headerHeight = defHeaderHeight - insets.top;
  // useMount(() => {
  //   console.log(Platform.OS, 'frame', frame);
  //   console.log(Platform.OS, 'insets', insets);
  // });
  return (
    <ScrollView style={style.box}>
      <View style={style.group}>
        <View style={[style.item]}>
          <Text>insets.top</Text>
          <Text>{insets.top}</Text>
        </View>

        <View style={[style.item]}>
          <Text>frame.width</Text>
          <Text>{frame.width}</Text>
        </View>
        <View style={[style.item]}>
          <Text>frame.height</Text>
          <Text>{frame.height}</Text>
        </View>
        <View style={[style.item]}>
          <Text>frame.x</Text>
          <Text>{frame.x}</Text>
        </View>

        <View style={[style.item, style.itemNoBorder]}>
          <Text>frame.y</Text>
          <Text>{frame.y}</Text>
        </View>
      </View>

      <View style={style.group}>
        <View style={[style.item, style.itemNoBorder]}>
          <Text></Text>
          <Text></Text>
        </View>
      </View>
    </ScrollView>
  );
};
